<template>
  <div class="login">
    <div class="name">登录</div>
    <div class="title">七尾医疗服务后台管理系统</div>

    <Form :model="formItem" :label-width="40" style=" width: 85%;margin: 0 auto;">
      <FormItem label="账号" style="background-color: #fff; padding: 10px;">
        <Input v-model="formItem.name" placeholder="请输入您的账号" boder="false"></Input>
      </FormItem>
            <FormItem label="密码" style="background-color: #fff; padding: 10px;">
        <Input v-model="formItem.password" placeholder="请输入密码"></Input>
      </FormItem>
      <div style="float: right;margin-bottom: 20px;">忘记密码或者联系管理员</div>
    <Submit type="warning" style="width: 100%;" @click="submit" />
    </Form>
    
  </div>
</template>

<script setup>
import { Submit } from 'view-ui-plus';
import { ref } from 'vue'
import router from '../router/index';

const formItem = ref({
  name: '',
  password:'',
})

const submit = () =>{
 router.push('/home')
}

</script>

<style scoped lang="scss">
.login {
  width: 450px;
  height: 500px;
  background-color: #006eff;
  margin: 0 auto;
  color: #fff;
  text-align: center;
  margin-top: 200px;
  .name {
    font-size: 28px;
    padding: 10px 0;
    font-weight: 600;
    padding-top: 50px;
  }
  .title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    margin-bottom: 40px;
  }

  :deep(.ivu-input ) {
    border: 0 ;
  }

}
</style>
